<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增产值费用率')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input.editable-select {
        background: #FFFFFF url("http://60.172.168.121:8877/img/arrow-down.gif") right center no-repeat;
        padding: 6px 16px;
        width: 100% !important;
        border: 1px solid #e5e6e7;
    }

    .editable-select-options {
        position: absolute;
        display: none;
        overflow: auto;
        padding: 0;
        background: #FFF;

        z-index: 10;
        width: 59.69% !important;
    }

    .editable-select-iframe {
        position: absolute;
        background: #FFF;
        z-index: 9;
        display: none;
    }

    .editable-select-options ul {
        margin: 0;
        padding: 0;
        z-index: 10;
        list-style: none;
        list-style-image: none;
        border: 1px solid #BDCDE9;
    }

    .editable-select-options li {
        cursor: default;
        padding: 2px 16px;
    }

    .editable-select-options li.selected {
        background: #1E90FF;
        color: #fff;
    }
</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-expenseReport-add" AUTOCOMPLETE="OFF">
        <h4 class="form-header h4">基本信息</h4>

        <div class="form-group">
            <label class="col-sm-3 control-label">费用类型：</label>
            <div class="col-sm-8">
                <select name="valueType" id="valueType" class="form-control noselect2" AUTOCOMPLETE="OFF">
                    <option value="">请选择</option>
                    <option value="1">项目</option>
                    <option value="2">职能部门</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">工程公司：</label>
            <div class="col-sm-8">
                <select name="compId" id="compId" class="form-control noselect2">
                    <option value="">请选择</option>
                    <option th:each="pro:${userComp}" th:value="${pro.compId}"
                            th:text="${pro.compName}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">职能部门/项目名称：</label>
            <div class="col-sm-8">
                <input type="text" class="form-control noselect2 shows" >
                <div id="inputselect">

                </div>
            </div>
        </div>
    </form>
    <th:block th:include="include :: footer"/>
    <th:block th:include="include :: datetimepicker-js"/>
    <th:block th:include="include :: select2-js"/>
    <th:block th:include="include :: jqueryEditableSelect-js"/>
    <script type="text/javascript">
        var prefix = ctx + "expenseReport";
        var prefixs = ctx + "outPutValue";
        var data;
        var html;
        var value;
        var compId;
        $(function () {
            $("#valueType").change(function () {
                $("#compId").get(0).selectedIndex=0;

                if($("#valueType option:selected").val()!=2){

                    $("#compId").change(function () {
                        if($("#valueType option:selected").val()!=2){
                            console.log(1);
                            $(".shows").hide();
                            compId = $("#compId option:selected").val();
                            console.log(compId);
                            $.ajax({
                                url: prefixs + '/findProByCompId',
                                data: {
                                    "compId": compId
                                },
                                success: function (data) {
                                    console.log(data);
                                    $("#depOrProName").remove();
                                    var str = '<select id="depOrProName" name="depOrProName" class="form-control noselect2" style="width: 100% !important;">';
                                    str += '<option title="请选择" value="">' + "请选择" + '</option>';
                                    for (var i in data.data) {
                                        html = data.data[i].pro_name;
                                        value = data.data[i].id;
                                        str += '<option title="' + html + '" value="' + value + '">' + html + '</option>';
                                    }
                                    str += '</select>';
                                    $("#inputselect").html(str);
                                    $("#depOrProName").editableSelect({
                                        bg_iframe: false,
                                        case_sensitive: false,
                                        items_then_scroll: 10,
                                        isFilter: false,
                                        effects: 'slide',
                                    });
                                }
                            })
                        }
                    })
                }else {
                    $(".shows").show();
                    $("input[name='depOrProName_sele']").remove();
                }
            })
        })
        function submitHandler() {
            data = {
                "compId": $("#compId").val(),
                "oid": ($("#depOrProName").val() == -1 ? '' : $("#depOrProName").val()),
                "valueType": $("#valueType").val(),
                "depOrProName": ($("input[name='depOrProName_sele']").val() == "请选择" ? '' : $("input[name='depOrProName_sele']").val()),
            }
            if(data.depOrProName==undefined){
                data.oid='';
                data.depOrProName=$(".shows").val();
            }
            if ($("#compId").val() == "" || data.depOrProName == "" || $("#valueType").val() == "" || $("#outputCostRate").val() == "") {
                alert("请检查工程公司、项目名称、费用类型和产值费用率是否填写！");
            } else {
                $.operate.save(prefix + "/add", data);
            }

        }
    </script>
</div>
</body>
</html>